<template>
	<view style="padding: 20rpx;">
		<!-- view -->
		<view class="upload">
			<text class="up">上传产品图片或视频</text>
			<van-uploader style="margin-top: 20rpx;" preview-size="110px" upload-text="添加图片或视频" :file-list="fileList"
				@after-read="afterRead" @delete="deleteImg" />
		</view>
		<van-cell-group>
			<van-field :value="form.comment" placeholder="展开说说对商品的想法吧" :border="false" type="textarea"
				custom-style="background:#F5F5F5; width:710rpx;height:400rpx; " @input="onChange($event, 'comment')" />
		</van-cell-group>
		<view class="good_msg">
			<image style="width: 110rpx;height: 86rpx;" :src="goodsMsg.uimage" mode="scaleToFill"></image>
			<view class="right_msg">
				<text class="title">{{ goodsMsg.title }}</text>
				<text class="span">{{ goodsMsg.text }}</text>
			</view>
		</view>
		<view class="rate_list" style="margin-top: 50rpx;">
			<text>产品质量</text>
			<van-rate style="margin-left: 30rpx;" color="#FF6200" :value="form.score_quality"
				@change="onChange($event, 'score_quality')" />
		</view>
		<view class="rate_list">
			<text>服务态度</text>
			<van-rate style="margin-left: 30rpx;" color="#FF6200" :value="form.score_service"
				@change="onChange($event, 'score_service')" />
		</view>
		<view class="rate_list">
			<text>描述相符</text>
			<van-rate style="margin-left: 30rpx;" color="#FF6200" :value="form.score_describe"
				@change="onChange($event, 'score_describe')" />
		</view>
		<view class="checked" style="margin-top: 100rpx;">
			<van-checkbox checked-color="#FF6200" icon-size="15px" style="font-size: 28rpx;" :value="form.anonymous"
				@change="onChange($event, 'anonymous')">匿名评价</van-checkbox>
		</view>
		<view class="btn">
			<button @click="submit">评价</button>
		</view>
	</view>
</template>

<script>
import { uploadFile, getGoodsComment, getOrderDetail } from '@/api/api'
export default {
	data() {
		return {
			fileList: [],
			form: {
				comment: '',
				score_describe: '',//描述相符
				score_service: '',//服务态度
				score_quality: '',//产品质量
				anonymous: false,
				imgList: []
			},
			goodsMsg: {
				id: 1,
				uimage: "https://daiyue.gzzhenyi.net/static/image/order/orderTests@4x.png",
				title: "胎儿母亲监护仪",
				text: "母婴监护版"
			},
			order_id:0,
			goods_id:0,
			id:0,
			difference:''
		}
	},
	onLoad(options) {
		this.order_id = options.id;
		getOrderDetail({ id: this.order_id }).then(res => {
		    this.goods_id = res.data.goods[0].goods_id;
			this.id = res.data.goods[0].id;
			this.difference = res.data.goods[0].difference
		})
	},
	methods: {
		// 输入框
		onChange(event, name) {
			let val = event.detail
			this.$set(this.form, name, val)
		},
		// 上传图片
		afterRead(event) {
			const { file } = event.detail;
			uploadFile(file.url).then(res => {
				if (res.code == 1) {
					this.fileList.push({
						url: res.data.fullurl,
					})
					this.form.imgList.push(res.data.url);

				}
			})
		},
		// 删除图片
		deleteImg(e) {
			let index = e.detail.index;
			this.fileList.splice(index, 1)
			this.form.imgList.splice(index, 1)
		},

		submit() {
			let { form, order_id, goods_id,id, difference } = this;
			if (!form.comment) {
				uni.showToast({
					title: '请输入评价内容',
					icon: 'none'
				})
				return
			}
			if (!form.score_quality) {
				uni.showToast({
					title: '请选择产品质量',
					icon: 'none'
				})
				return
			}
			if (!form.score_service) {
				uni.showToast({
					title: '请选择服务态度',
					icon: 'none'
				})
				return
			}
			if (!form.score_describe) {
				uni.showToast({
					title: '请选择描述相符',
					icon: 'none'
				})
				return
			}
			let data = {
				anonymous: form.anonymous ? 1 : 0,
				order_id: order_id,
				goodsList: [
					{
						id:id,
						goods_id: goods_id,
						imgList: form.imgList,
						comment: form.comment,
						score_describe: form.score_describe,
						score_service: form.score_service,
						score_quality: form.score_quality,
						difference: difference
					}
				]
			}
			getGoodsComment(data).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				if (res.code == 1) {
					uni.navigateBack({
						delta: 1
					})
				}
			})

		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.upload {
	display: flex;
	flex-direction: column;

	.van-uploader ::v-deep .van-uploader__upload {
		background-color: #DDDDDD;
		width: 710rpx !important;
		border-radius: 12rpx;

		// .van-icon{
		// 	background: #000;
		// }
		.van-uploader__upload-icon {
			color: #bbb;
		}
	}

	text.up {
		font-size: 30rpx;
		line-height: 30rpx;
		color: #333333;
	}
}

.good_msg {
	display: flex;
	margin-top: 30rpx;

	.right_msg {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4rpx 0;

		.title {
			font-size: 30rpx;
			color: #333333;
			font-weight: 500;
		}

		.span {
			font-family: PingFang SC;
			font-size: 24rpx;
			color: #5C5C5C;
		}
	}
}

.rate_list {
	margin-top: 30rpx;
	display: flex;
	align-items: center;

	text {
		font-size: 26rpx;
		color: #333333;
	}
}

.btn {
	margin-top: 50rpx;

	button {
		border-radius: 40rpx;
		background: #359BEF;
		color: #fff;

		&::after {
			border: none;
		}
	}
}
</style>